<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {
            background-color: lawngreen;
        }
        #p2 {
            background-image: url("./img/citypoint.png");
            width:20px;
            height: 20px;
           /* 该图片还是重复的,只是背景图片的大小被限制在 20px 20px 之内*/
        }


        #p3{
            background-image: url("./img/ui-icons.png");
          /*  width:256px;
            height: 256px;*/
            width:16px;
            height: 16px;
            background-position: -64px -80px;
            /* 整张图片向左上角移动(左)64px (上)80px*/
        }
        body{
            background-image: url("./img/background.jpeg");
            background-repeat:no-repeat;/*图片取消重复*/
        }

        #p4 {
            border:1px solid red;
            background-image: url("./img/citypoint.png");
            width:100%;
            height: 720px;
            background-position:right;
            background-repeat:no-repeat;/*图片取消重复*/
        }
    </style>

</head>
<body>
<!--
 内联样式的优先级别高于外联样式
 外联样式:id选择器级别最高,其次是类选择器
 元素选择器和伪类
-->
<p id="p1">这是一个段落</p>
<p id="p2"> </p>
<p id="p3"> </p>
<p id="p4"> </p>
</body>
</html>